<template>
  <view class="time-popup">
    <view class="popup-header">
      <uni-icons type="closeempty" size="14" color="#B0B0B0" @click="$emit('onClose')"></uni-icons>
      <h2>填写预约信息</h2>
      <view></view>
    </view>
    <view class="popup-main">
      <view class="main-card">
        <view class="main-title">预约项目（可不选）</view>
        <view class="main-project">
          <view class="project-item" :class="item.id == invitationParams.appointmentItemCategoryId?'active':''" v-for="(item) in popupCate" :key="item.id" @click="invitationParams.appointmentItemCategoryId = item.id">{{item.name}}</view>
        </view>
      </view>
      <view class="main-card">
        <view class="main-title">预约医生</view>
        <view class="main-doctor">
          <view class="doctor-item" :class="invitationParams.doctorStaffId == item.id?'active':''" v-for="(item) in doctorList" :key="idx" @click="invitationParams.doctorStaffId = item.id">
            <image :src="item.avatar || '../static/gray.jpg'" mode="aspectFill" class="img"></image>
            <image src="@/static/check-on.png" v-show="item.id == invitationParams.doctorStaffId" mode="aspectFill" class="icon"></image>
            <view class="h2">{{item.realName}}</view>
          </view>
          <view class="doctor-item" :class="invitationParams.doctorStaffId == '0'?'active':''" @click="invitationParams.doctorStaffId = 0">
            <image src="@/static/doctor-default.png" mode="aspectFill" class="img"></image>
            <image src="@/static/check-on.png" v-show="invitationParams.doctorStaffId == '0'" mode="aspectFill" class="icon"></image>
            <view class="h2">到店分配</view>
          </view>
        </view>
      </view>
      <view class="main-card">
        <view class="main-title">到店时间 <span style="color: #f00; margin-left: 8rpx;">*</span> <image src="@/static/date-icon.png" class="date-icon" mode="aspectFill"></image></view>
        <view class="main-tabs not-bar">
          <view class="tabs-item" :class="idx == invitationParams.curDate?'active':''" v-for="(item,idx) in dateList" :key="item.date" @click="invitationParams.curDate = idx">
            <view class="item-h2">{{idx == 0?'今天':item.day}}</view>
            <view>{{item.date}}</view>
          </view>
        </view>
        <view class="main-time">
          <view class="time-item" :class="idx == invitationParams.curTime?'active':''" v-for="(item,idx) in timeList" :key="item" @click="invitationParams.curTime = idx">{{item}}</view>
        </view>
      </view>
      <view class="main-item main-card">
        <view class="item-label">联系方式 <span style="color: #f00; margin-left: 8rpx;">*</span> <view class="label-span">用于门店跟您确认到店时间</view></view>
        <view class="item-info">{{user.mobile}}</view>
      </view>
      <view class="main-item main-card">
        <view class="item-label">备注</view>
        <input class="input" type="text" v-model="invitationParams.notes" placeholder="选填，可备注说明" />
      </view>
    </view>
    <view class="popup-footer">
      <view class="button" @click="handleSubmit()">立即预约</view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"SinyuInvitation",
    props:{
      doctorList:{
        type:Array,
        required:true
      },
      popupCate:{
        type:Array,
        required:true
      },
      doctorStaffId:{
        type:String,
        required:false
      }
    },
    data() {
      return {
        user:uni.getStorageSync('user') || {},
        dateList:[],
        timeList:['08:00-10:00','10:00-12:00','14:00-16:00','16:00-18:00'],
        invitationParams:{
          curDate:0,
          curTime:0,
          doctorStaffId:0,
          appointmentItemCategoryId:null,
          notes:''
        },
        selectStore:{},
      };
    },
    created() {
      this.selectStore = uni.getStorageSync('selectStore')
      this.dateList = this.getNextWeekDates()
      if(this.doctorStaffId){
        this.invitationParams.doctorStaffId = this.doctorStaffId
      }
    },
    methods:{
      getNextWeekDates(value) {
        let dates = [];
        let daysOfWeek = ['周日','周一', '周二', '周三', '周四', '周五', '周六'];
        let today = value?new Date(value):new Date()
        for (let i = 0; i < 7; i++) {
          let nextDate = new Date(today);
          nextDate.setDate(today.getDate() + i);
          let month = (nextDate.getMonth() + 1).toString().padStart(2, '0');
          let day = nextDate.getDate().toString().padStart(2, '0');
          let dateString = `${month}-${day}`;
          let dayIndex = nextDate.getDay();
          let dayOfWeek = daysOfWeek[dayIndex];
          dates.push({date: dateString, day: dayOfWeek});
        }
        return dates;
      },
      handleSubmit(){
        let date = this.dateList[this.invitationParams.curDate].date
        let time = this.timeList[this.invitationParams.curTime].split('-')
        const year = new Date().getFullYear()
        uni.showModal({
          title:'确定立即预约?',
          success:result=>{
            if(result.confirm){
              const data = {
                ...this.invitationParams,
                merchantId:this.selectStore.merchantId,
                orgId:this.selectStore.id,
                appointmentStartTime:`${year}-${date} ${time[0]}:00`,
                appointmentEndTime:`${year}-${date} ${time[1]}:00`
              }
              this.$post('/yahe/appointment/save',data,'1').then(res=>{
                if(res.code == '1'){
                  this.$toast('提交成功','success')
                  this.$emit("onClose")
                  setTimeout(()=>{
                    uni.navigateTo({
                      url:`/doctorPackage/invitation-success`
                    })
                  },1000)
                }else{
                  this.$toast(res.message)
                }
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="less">

    .time-popup{
      background: var(--page-bg);
      border-radius: 20rpx 20rpx 0 0;
      padding: 24rpx;
      .popup-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24rpx;
        h2{
          font-size: 28rpx;
          color: var(--title-color);
        }
      }
      .popup-main{
        .main-card{
          padding: 28rpx 24rpx;
          background: #fff;
          border-radius: 20rpx;
          margin-bottom: 20rpx;
        }
        .main-title{
          font-size: 28rpx;
          margin-bottom: 6rpx;
          color: var(--title-color);
          display: flex;
          align-items: center;
          .date-icon{
            width: 32rpx;
            height: 32rpx;
            margin-left: auto;
          }
        }
        .main-doctor{
          display: flex;
          align-items: center;
          .doctor-item{
            margin-right: 20rpx;
            width: 114rpx;
            border-radius: 8rpx;
            overflow: hidden;
            border: 2rpx solid transparent;
            position: relative;
            &.active{
              border-color: var(--theme-color);
            }
            .img{
              width: 114rpx;
              height: 114rpx;
              display: block
            }
            .icon{
              position: absolute;
              right: 0;
              top: 0;
              width: 30rpx;
              height: 30rpx;
            }
            .h2{
              font-size: 22rpx;
              color: var(--title-color);
              line-height: 38rpx;
              text-align: center;
            }
          }
        }
        .main-project{
          display: flex;
          flex-wrap: wrap;
          overflow-y: auto;
          max-height: 160rpx;
          .project-item{
            width: 150rpx;
            line-height: 60rpx;
            text-align: center;
            background: var(--page-bg);
            margin-right: 18rpx;
            margin-top: 18rpx;
            font-size: 24rpx;
            border-radius: 60rpx;
            color: #6D6D6D;
            &:nth-child(4n){
              margin-right: 0;
            }
            &.active{
              background: var(--theme-color);
              color: #fff;
            }
          }
        }
        .main-tabs{
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          margin: 18rpx 0 6rpx;
          .tabs-item{
            width: 90rpx;
            border-bottom: 4rpx solid transparent;
            margin-right: 10rpx;
            padding-bottom: 8rpx;
            color: #B0B0B0;
            white-space: nowrap;
            text-align: center;
            font-size: 22rpx;
            .item-h2{
              color: #6D6D6D;
              font-size: 26rpx;
            }
            &.active{
              border-bottom: 4rpx solid var(--theme-color);
              color: var(--theme-color);
              .item-h2{
                color: var(--theme-color);
              }
            }
          }
        }
        .main-time{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .time-item{
            width: 49%;
            line-height: 60rpx;
            border-radius: 60rpx;
            text-align: center;
            background: var(--page-bg);
            margin-top: 18rpx;
            font-size: 24rpx;
            color: #6D6D6D;
            &.active{
              background: var(--theme-color);
              color: #fff;
            }
          }
        }
        
        .main-item{
          display: flex;
          align-items: center;
          .item-label{
            font-size: 28rpx;
            color: var(--title-color);
            margin-right: auto;
            .label-span{
              color: #B0B0B0;
              font-size: 22rpx;
            }
          }
          .item-info{
            display: flex;
            align-items: center;
            justify-content: right;
            font-size: 28rpx;
            color: var(--title-color);
          }
          .input{
            text-align: right;
            font-size: 28rpx;
            color: #6D6D6D;
          }
        }
      } //  popup-main end
      
      .popup-footer{
        margin-top: 24rpx;
        padding: 14rpx 0 0;
        .button{
          line-height: 72rpx;
          font-size: 28rpx;
          background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
          text-align: center;
          border-radius: 72rpx;
          color: #fff;
        }
      }
    }  // time-popup end
</style>